<template>
	<view class="warp">
		<u-navbar title="签到" is-fixed background="url('https://www.yplm888.com//uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png') no-repeat"></u-navbar>
		<!-- 个人信息 -->
		<view class="user-info">
			<u-avatar :src="userInfo.avatar"></u-avatar>
			<view class="signIn-heard">
				<view class="title">
					<view class="title-today b-fontw">
						已连续签到<text style="color: #FE3057;margin: 0 4rpx;">{{signData.successions}}</text>天
					</view>
					<view class="title-tomorrow">
						明日签到可获得{{signData.score}}兑换券
					</view>
				</view>
			</view>
			<view :class="isSignin?'dis-button':'button'" @click="signIn">
				{{isSignin?'已签到':'签到'}}
			</view>
		</view>
		<!-- 连续签到 -->
		<view class="signIn-box b-card">
			<view class="signIn-content b-flex-space">
				<view class="item">
					<view class="b-flex-space">
						<view class="item item-flex card" :class="{'card-check':1<=signData.successions}">
							<text class="title">第{{day*8+1}}天</text>
							<image class="img" src="https://zhoukaiwen.com/img/clockImg/icon-money.png" mode="">
							</image>
							<text class="describe">{{day>0?'+7':'+1'}}</text>
						</view>
						<view class="item item-flex card" :class="{'card-check':2<=signData.successions}">
							<text class="title">第{{day*8+2}}天</text>
							<image class="img" src="https://zhoukaiwen.com/img/clockImg/icon-money.png" mode="">
							</image>
							<text class="describe">{{day>0?'+7':'+2'}}</text>
						</view>
					</view>
					<view class="b-flex-space">
						<view class="item item-flex card" :class="{'card-check':5<=signData.successions}">
							<text class="title">第{{day*8+5}}天</text>
							<image class="img" src="https://zhoukaiwen.com/img/clockImg/icon-money.png" mode="">
							</image>
							<text class="describe">{{day>0?'+7':'+5'}}</text>
						</view>
						<view class="item item-flex card" :class="{'card-check':6<=signData.successions}">
							<text class="title">第{{day*8+6}}天</text>
							<image class="img" src="https://zhoukaiwen.com/img/clockImg/icon-money.png" mode="">
							</image>
							<text class="describe">{{day>0?'+7':'+6'}}</text>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="b-flex-space">
						<view class="item item-flex card" :class="{'card-check':3<=signData.successions}">
							<text class="title">第{{day*8+3}}天</text>
							<image class="img" src="https://zhoukaiwen.com/img/clockImg/icon-money.png" mode="">
							</image>
							<text class="describe">{{day>0?'+7':'+3'}}</text>
						</view>
						<view class="item item-flex card" :class="{'card-check':4<=signData.successions}">
							<text class="title">第{{day*8+4}}天</text>
							<image class="img" src="https://zhoukaiwen.com/img/clockImg/icon-money.png" mode="">
							</image>
							<text class="describe">{{day>0?'+7':'+4'}}</text>
						</view>
					</view>
					<view class="b-flex-space">
						<view class="item item-flex card" :class="{'card-check':7<=signData.successions}">
							<text class="title">第{{day*8+7}}天</text>
							<image class="img" src="https://zhoukaiwen.com/img/clockImg/icon-money.png" mode="">
							</image>
							<text class="describe">+7</text>
						</view>
						<view class="item item-flex card" :class="{'card-check':7<signData.successions}">
							<text class="title">第{{day*8+8}}天</text>
							<image class="img" src="https://zhoukaiwen.com/img/clockImg/icon-money.png" mode="">
							</image>
							<text class="describe">+7</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 任务 -->
		<view class="b-fontw" style="margin-top: 0rpx;text-align: center;">签到规则</view>
			<scroll-view  class="task-box b-card" scroll-y="true" @scroll="scroll" :style="'height:' + scrollH+'rpx;'">
				<view class="task-item b-flex-space" v-for="(item, index) in daysAndGscore" :key="index">
					<view class="task-item-left b-flex-space">
						<image class="task-item-icon" src="https://www.yplm888.com/uploads/20240204/1b8b45ff3174decafb0a93a9a832503e.png" mode=""></image>
						<view class="task-item-describe">
							<view class="title b-fontw">{{item.day}}</view>
						</view>
					</view>
					<view class="task-item-btn">+{{item.score}}兑换券</view>
				</view>
		</scroll-view>
		<u-modal v-model="messageShow" content="是否订阅签到通知和签到成功通知？" @confirm='messageConfirm' show-cancel-button></u-modal>
	</view>
</template>

<script>
	import {
		requestSubscribeMessage
	} from '@/mixin/RSMessage.js'
	
	export default {
		mixins: [requestSubscribeMessage],
		data() {
			return {
				messageShow: false,
				baseUrl: this.$u.http.config.baseUrl,
				userInfo: uni.getStorageSync('userinfo'),
				receive: false,
				total_start: 0,
				total: 6562,
				signData: '',
				daysAndGscore: [],
				isSignin: false,
				scrollH:0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				day: 0,
				pageType:'siginSuccess',
			}
		},
		onLoad() {
			this.initData()
			this.getMessageStatus()
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.scrollH = res.windowHeight * 750 / res.windowWidth;
					// #ifdef MP-WEIXIN
					that.scrollH = res.windowHeight * 750 / res.windowWidth - parseInt(res.safeArea.top) - 1000;
					// #endif
				}
			});
		},
		methods: {
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			// 初始化数据
			initData() {
				this.$u.api.getSignInData().then(res => {
					if (res.data.signin) {
						this.isSignin = true
					}
					this.day = Math.floor((res.data.successions)/8)
					this.signData = res.data
					this.daysAndGscore = []
					let keys = Object.keys(res.data.signinscore)
					keys.forEach((key, index) => {
						this.daysAndGscore.push({
							day: `第${index+1}天`,
							score: res.data.signinscore[key]
						})
					})
				})
			},
			signIn() {
				this.$u.api.signInNow().then(res => {
					if (res.code == 1) {
						this.isSignin = true
						this.$u.toast(res.msg)
						this.initData()
					}
				})
			},
			toReceive() {
				this.receive = true
				setTimeout(() => {
					this.total_start = this.total
					this.total = this.total + 3
					this.receive = false
				}, 1800)
			}
		}
	}
</script>

<style lang="scss" scoped>
	$W: 140rpx;
	$titleSize: 32rpx;
	$signH: 80rpx;

	.b-card {
		margin: 30rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		box-shadow: 2rpx 2rpx 10rpx #C0C0C0;
	}

	.b-flex-space {
		display: flex;
		justify-content: space-between;
	}

	.b-fontw {
		font-weight: 600;
	}

	@keyframes middles {
		from {
			transform: scale(1);
		}

		to {
			transform: scale(0);
		}
	}

	.addAnimation {
		animation: middles 0.5s linear;
	}

	.user-info {
		margin: 40rpx;
		display: flex;
		align-items: center;

		.signIn-heard {
			margin-left: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				height: $signH;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title-today {
					font-size: $titleSize;
				}

				.title-tomorrow {
					width: 400rpx;
					font-size: 24rpx;
					color: #C0C0C0;
				}
			}

			.total {
				height: $signH - 10;
				font-size: 32rpx;
				padding: 0 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 20rpx;
				border: 2rpx solid #C0C0C0;

				.img {
					width: 60rpx;
					height: 60rpx;
					margin-right: 10rpx;
				}
			}
		}

		.button {
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			margin-left: 0rpx;
			border-radius: 30rpx;
			color: #FE3057;
			border: 1rpx solid #FE3057;
			background-color: #ffedf0;
		}

		.dis-button {
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			margin-left: 0rpx;
			border-radius: 30rpx;
			color: #ccc;
			border: 1rpx solid #ccc;
			background-color: #f5f6fa;
		}
	}
	.warp {
		.signIn-box {
			.signIn-content {
				.item {
					width: calc(50% - 10rpx);

					.img {
						height: 60rpx;
						width: 60rpx;
						margin: 6rpx 0;
					}
				}

				.item-flex {
					display: flex;
					flex-direction: column;
					// justify-content: center;
					align-items: center;

				}

				.card {
					height: 180rpx;
					padding: 15rpx 24rpx;
					box-sizing: border-box;
					background-color: #f5f6fa;
					border-radius: 10rpx;
					margin-top: 20rpx;

					.title {
						font-size: 28rpx;
					}

					.describe {
						font-size: 20rpx;
						color: #C0C0C0;
					}

					.item-check {}
				}

				.card-check {
					color: #FFFFFF;
					// background-color: #444a62;
					background-color: #FE3057;

					.describe {
						color: #FFFFFF;
					}
				}

			}
		}

		.task-box {
			width: 630rpx;
			margin-bottom: 40rpx;

			.title {
				font-size: $titleSize;
				text-align: center;

			}

			.task-item {
				margin: 15rpx 0;
				align-items: center;

				.task-item-left {
					align-items: center;

					.task-item-icon {
						width: 60rpx;
						height: 60rpx;
					}

					.task-item-describe {
						// height: 60rpx;
						// display: flex;
						// flex-direction: column;
						// justify-content: space-between;
						margin-left: 30rpx;

						.title {
							font-size: 28rpx;
							// margin: 5rpx 0;
						}

						.text {
							font-size: 20rpx;
							color: #C0C0C0;
						}
					}
				}

				.task-item-btn {
					width: 180rpx;
					color: #000;
					padding: 10rpx 20rpx;
					font-size: 28rpx;
					// font-weight: 600;
					// background-color: #00c657;
					// background-image: linear-gradient( to left, #454c64,#262d47);
					// background-image: linear-gradient( to top right, #06c852,#66e805);
					box-shadow: 2rpx 2rpx 10rpx #f5f6fa;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.img {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
</style>
